<template>
  <div id="expendtype">
    <el-row>
      <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
        <el-input v-model="addInput" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :xs="4" :sm="4" :md="5" :lg="5" :xl="4">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain @click="addType">添加</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <ETtable></ETtable>
          <Page></Page>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ETtable from '../ygr/ETtable.vue'
import Page from '../../common/Page.vue'
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'ExpendType',
  components: {
    ETtable,
    Page
  },
  data() {
    return {
      addInput: ''
    }
  },
  methods: {
    ...mapActions(['expend/opList', 'expend/getLists']),
    addType() { //添加消耗品类别

      let isCommon = false;
      this.$store.state.table.allList.forEach(item => {
        if (item.goodsClassifyName == this.addInput) {
          isCommon = true;
          return;
        }
      })
      if (isCommon) {
        this.$message({
          type: 'danger',
          message: '该分类已存在!'
        })
      } else if(this.addInput){//不为空
        this.$confirm(`是否确定添加?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          let obj = { goodsClassifyName: this.addInput }
          this['expend/opList']([url.addCTData, obj]).then(res => {
            return this.$store.commit('expend/message', { res: res, tt: this })
          }).catch(err => {
            this.$message({
              type: 'danger',
              message: '添加出错!'
            })
          }).then(res => {
            this['expend/getLists']([url.getCTData])
            this.addInput = ''
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }else{
        this.$message({
            type: 'danger',
            message: '不能为空'
          })
      }
    },
  },
}

</script>

<style lang="less" scoped>
#expendtype {
  .el-row {
    margin-top: 10px;
  }
}

</style>
